<template>
    <div>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            :cell-style="{padding: '0px',}"
            :row-key="rowKeys"
            :tree-props="{children: 'children'}"
            :default-expand-all="true"
        >
            <el-table-column
                prop="name"
                label="参数"
                width="250">
                <template v-slot="scope">
                    <div class="cell-container">
                        <el-input v-model="scope.row.name" size="mini" :disabled="scope.row===json.json||
                        (scope.row.name==='items'&&scope.row.parent.type==='array')" @change="updateTable"
                                  :style="{position: 'absolute',top: '-4px',width: 220-(scope.row?.children?.length>0)*3-(scope.row.path.split('.').length-1)*16+'px'}"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="必填"
                width="100">
                <template v-slot="scope">
                    <el-switch size="mini"
                               v-model="scope.row.require"
                               @change="updateTable"
                               active-color="#13ce66"
                               inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                prop="type"
                label="类型">
                <template v-slot="scope">
                    <el-select v-model="scope.row.type" size="mini" @change="updateTable">
                        <el-option
                            v-for="item in ['string', 'number', 'boolean', 'object', 'array', 'null', 'integer']"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                prop="default"
                label="默认">
                <template v-slot="scope">
                    <el-input clearable size="mini"
                              v-model="scope.row.default"
                              @clear="delete scope.row.default;updateTable()"
                              @input="scope.row.default = $event;updateTable()"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="description"
                label="注备">
                <template v-slot="scope">
                    <el-input clearable size="mini"
                              v-model="scope.row.description"
                              @clear="delete scope.row.description;updateTable()"
                              @input="scope.row.description = $event;updateTable()"/>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template v-slot="scope">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-edit" @click="$refs.form.open(scope.row)"></el-button>
                        <el-button
                            v-if="!(scope.row===json.json||(scope.row.name==='items'&&scope.row.parent.type==='array'))"
                            type="danger" icon="el-icon-delete"
                            @click="json.remove(scope.row);updateTable()"></el-button>
                        <el-button v-if="!(scope.row===json.json||(scope.row.parent.type==='array'))"
                                   icon="el-icon-plus" @click="json.add(scope.row);updateTable()"></el-button>
                        <el-button v-if="scope.row.type==='object'" icon="el-icon-circle-plus-outline"
                                   @click="json.add(scope.row,true);updateTable()"></el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <JsonSchemaForm ref="form" @updateTable="updateTable"/>
    </div>
</template>

<script>
import {JsonSchema} from "@/view/JsonSchema";
import JsonSchemaForm from "@/view/JsonSchemaForm.vue";

export default {
    components: {JsonSchemaForm},
    props: {
        schema: Object
    },
    data() {
        return {
            tableData: [],
            json: new JsonSchema(this.schema)
        };
    },
    mounted() {
        // this.json = new JsonSchema(this.schema)
        this.tableData = [this.json.json];
        // console.log(new JsonSchema(this.schema));
    },
    methods: {
        testInput(val) {
            console.log(val)
        },
        updateTable() {
            console.log('触发更新', this.json.json);
            this.tableData = [this.json.json];
            // this.$emit('updateTable', JSON.stringify(this.json.json, JsonSchema.replacer, 4));
            this.$emit('updateTable', this.json.json);
        },
        testNew(row) {
            let temp = this.json.add(row)
            // this.$set(row.parent, 'properties', row.parent.properties);
            console.log('尝试重新复制', temp)
            this.updateTable()
        },
        rowKeys(row) {
            return row.id
        }
    }
}
</script>
<style scoped>
.cell-container {
    position: relative;
    display: inline;
    align-items: center;
}
</style>